<template>
	<view class="pageAll">
		<view class="content">
			<view class="stepTitle">
				第二步
			</view>
			<view class="stepInfo">
				<label class="fromInputLabel">
					<input v-model="form.price" class="formFood" type="digit" @focus="inputPrice" :focus="!myPalVisible.price" @blur="inputPriceBlur" @confirm="getNextInput('unit')"/>
					<view v-if="myPalVisible.price" class="fromInputLabelText" @click="inputPrice">
						<text class="palLeft leftText">{{placeholder.price.left}}</text>
						<text class="palRight">{{placeholder.price.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.unit" class="formAddress" type="text" @focus="inputUnit" @blur="inputUnitBlur" :focus="!myPalVisible.unit" @confirm="getNextInput('norm')"/>
					<view v-if="myPalVisible.unit" class="fromInputLabelText" @click="inputUnit">
						<text class="palLeft">{{placeholder.unit.left}}</text>
						<text class="palRight">{{placeholder.unit.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.norm" class="formAddress" type="text" @focus="inputNorm" @blur="inputNormBlur" :focus="!myPalVisible.norm" @confirm="getNextInput('innerPackaging')"/>
					<view v-if="myPalVisible.norm" class="fromInputLabelText" @click="inputNorm">
						<text class="palLeft">{{placeholder.norm.left}}</text>
						<text class="palRight">{{placeholder.norm.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.innerPackaging" class="formAddress" @focus="inputInnerPackaging" @blur="inputInnerPackagingBlur" :focus="!myPalVisible.innerPackaging" @confirm="getNextInput('outerPackaging')"/>
					<view v-if="myPalVisible.innerPackaging" class="fromInputLabelText" @click="inputInnerPackaging">
						<text class="palLeft">{{placeholder.innerPackaging.left}}</text>
						<text class="palRight">{{placeholder.innerPackaging.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.outerPackaging" class="formAddress" @input="inputOuterPackaging" @blur="inputOuterPackagingBlur" :focus="!myPalVisible.outerPackaging"/>
					<view v-if="myPalVisible.outerPackaging" class="fromInputLabelText" @click="inputOuterPackaging">
						<text class="palLeft">{{placeholder.outerPackaging.left}}</text>
						<text class="palRight">{{placeholder.outerPackaging.right}}</text>
					</view>
				</label>
			</view>
			<view class="nextStep">
				<button @click="preStep">
					上一步
				</button>
				<button @click="nextStep">
					下一步
				</button>
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" @click="saveDraft" hover-class="subActive">
				存为草稿
			</button>
		</view>
	</view>
</template>

<script>
	import { HBValidate } from '@/utils/tools.js'
	import { ValidateReport } from '@/utils/tools.js'
	import { AvoidDoubleClick } from '@/utils/tools.js'
	const avoidDoubleClick = new AvoidDoubleClick()
	export default {
		data() {
			return {
				form: {
					price: null,
					unit: null,
					norm: null,
					innerPackaging: null,
					outerPackaging: null,
				},
				myPalVisible: {
					price: true,
					unit: true,
					norm: true,
					innerPackaging: true,
					outerPackaging: true,
				},
				placeholder: {
					price: {
						left: '请输入采购单价 (含税包邮价) 单位：元',
						right: ''
					},
					unit: {
						left: '请输入采购单位',
						right: '如: 袋'
					},
					norm: {
						left: '请输入包装规格',
						right: '如: 200g/每包'
					},
					innerPackaging: {
						left: '请输入内包装方式',
						right: '如: 食品级真空袋'
					},
					outerPackaging: {
						left: '请输入外包装方式',
						right: '如: 填充物+纸箱'
					},
				},
				isWorking: false, // 防止用户多次点击
			}
		},
		methods: {
			// 价格，模拟占位符显示与隐藏
			inputPrice() {
				this.myPalVisible.price = false
			},
			inputPriceBlur() {
				if(this.form.price) {
					this.myPalVisible.price = false
				} else {
					this.myPalVisible.price = true
				}
			},
			// 模拟占位符显示与隐藏
			inputUnit() {
				this.myPalVisible.unit = false
			},
			inputUnitBlur() {
				if(this.form.unit) {
					this.myPalVisible.unit = false
				} else {
					this.myPalVisible.unit = true
				}
			},
			//模拟占位符显示与隐藏
			inputNorm() {
				this.myPalVisible.norm = false
			},
			inputNormBlur() {
				if(this.form.norm) {
					this.myPalVisible.norm = false
				} else {
					this.myPalVisible.norm = true
				}
			},
			// 模拟占位符显示与隐藏
			inputInnerPackaging() {
				this.myPalVisible.innerPackaging = false
			},
			inputInnerPackagingBlur() {
				if(this.form.innerPackaging) {
					this.myPalVisible.innerPackaging = false
				} else {
					this.myPalVisible.innerPackaging = true
				}
			},
			// 模拟占位符显示与隐藏
			inputOuterPackaging() {
				this.myPalVisible.outerPackaging = false
			},
			inputOuterPackagingBlur() {
				if(this.form.outerPackaging) {
					this.myPalVisible.outerPackaging = false
				} else {
					this.myPalVisible.outerPackaging = true
				}
			},
			getNextInput(value) {
				this.$set(this.myPalVisible, value, false)
			},
			// 保存提报
			saveDraft() {
				const validateReport = new ValidateReport()
				
				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if(this.form.price) {
					if(!validateReport.vdFoodPirce(this.form.price)) {
						return false
					}
				}
				if(this.form.unit) {
					if(!validateReport.vdItemNotNone(this.form.unit, '采购单位')) {
						return false
					}
				}
				
				if(this.form.norm) {
					if(!validateReport.vdItemNotNone(this.form.norm, '包装规格')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束
				
				this.$store.commit('setCurrTag', 1)
				this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
				
				if(avoidDoubleClick.isWork()) {
					return false
				}
				
				if(this.$store.getters.getReportDraft.id) {
					this.$api.selectDraftUpdate(
						this.$store.getters.getReportDraft
					)
					.then(res => {
						if(res.status) {
							uni.switchTab({
								url:'../foodReport/foodReport'
							})
						} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
						avoidDoubleClick.toRest()
					})
				} else {
					this.$api.selectDraft(
						this.$store.getters.getReportDraft
					)
					.then(res => {
						
						if(res.status) {
							uni.switchTab({
								url:'../foodReport/foodReport'
							})
						} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
						avoidDoubleClick.toRest()
					})
				}
				
			},
			preStep() {
				const validateReport = new ValidateReport()
				
				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if(this.form.price) {
					if(!validateReport.vdFoodPirce(this.form.price)) {
						return false
					}
				}
				if(this.form.unit) {
					if(!validateReport.vdItemNotNone(this.form.unit, '采购单位')) {
						return false
					}
				}
				
				if(this.form.norm) {
					if(!validateReport.vdItemNotNone(this.form.norm, '包装规格')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束
				
				this.$store.commit('setCurrTag', 1)
				this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
				uni.navigateTo({
					url: '../firstStep/firstStep'
				})
			},
			nextStep() {
				
				const validateReport = new ValidateReport()
				if(validateReport.vdFoodPirce(this.form.price) 
				&& validateReport.vdItemNotNone(this.form.unit, '采购单位') 
				&& validateReport.vdItemNotNone(this.form.norm, '包装规格')
				&& validateReport.vdItemNotNone(this.form.innerPackaging, '内包装方式')
				&& validateReport.vdItemNotNone(this.form.outerPackaging, '外包装方式')) {
					 this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
					 uni.navigateTo({
					 	url: '../thirdStep/thirdStep'
					 })
				 }
				 
			},
			getFormInfo(){
				const tempForm = this.$store.getters.getReportDraft
				this.$set(this.form, 'price', parseInt(tempForm.price) !== 0 ? tempForm.price : '')
				this.$set(this.form, 'unit', tempForm.units?tempForm.units:'')
				this.$set(this.form, 'norm', tempForm.specification?tempForm.specification:'')
				this.$set(this.form, 'innerPackaging', tempForm.inside_packing?tempForm.inside_packing:'')
				this.$set(this.form, 'outerPackaging', tempForm.external_packing?tempForm.external_packing:'')
				for(const index in this.form) {
					if(this.form[index]) {
						this.myPalVisible[index] = false
					}
				}
			}
		},
		onLoad() {
			this.getFormInfo()
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.content {
		box-shadow: 0 0 20upx 5upx rgba(240, 41, 41, 0.1);
		background-color: #FFF;
		padding: 22upx;
		height: 755upx;
		border-radius: 10upx;
	}

	.stepTitle {
		font-size: 36upx;
		color: #f7533e;
		text-align: center;
		letter-spacing: 10upx;
		padding: 10upx 0;
		font-weight: bold;
		box-sizing: border-box;
	}

	.stepInfo {
		font-size: 32upx;
		color: #6f6f6f;
		margin-top: 17upx;
	}

	.formFood {
		background: #fdf7f6;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.formAddress {
		background: #fdf5f3;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.fromQuality {
		background: #fdf7f6;
		padding: 25upx 20upx 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		width: auto;
		height: 321.33upx;
	}

	.fromInputLabel {
		position: relative;
		display: block;
	}

	.fromInputLabel .fromInputLabelText {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 95.33upx;
		padding: 0 20upx;
		width: 100%;
	}

	.fromInputLabelText text {
		display: inline-block;
	}

	.fromInputLabelText .palLeft {
		width: 58%;
	}
	.leftText{
		width: 100% !important;
	}
	.nextStep {
		text-align: center;
		margin-top: 60upx;
		display: flex;
		text-align: center;
	}

	.nextStep button:first {
		margin-left: 140upx;
	}

	.nextStep button {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #fdf5f3;
		padding: 0;
	}

	.nextStep button:active {
		background-color: #fdf7f6;
	}

	.nextStep button:after {
		border: 1upx solid #eeeeee;
	}

	.bottomBtnView {
		text-align: center;
		margin-top: 100upx;
	}

	.bottomBtn {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #ff0000;
		color: #FFF;
		padding: 0;
	}

	.bottomBtn:after {
		border: none;
	}

	.subActive {
		background-color: #c90000 !important;
	}

	.placeholderClass {
		font-size: 32upx;
		color: #6f6f6f;
	}
</style>
